<template>
	<view class="wanlshop-container">
		<!-- 新页面 -->
		<view class="">
			<u-sticky bgColor="#fff" offsetTop="0" customNavHeight="0">
				<u-status-bar></u-status-bar>
				<view class="u-flex u-flex-y-center u-flex-between head">
					<view class="flex" @tap="$wanlshop.back()">
						<u-icon name="arrow-left" size="32rpx" color="#000"></u-icon>
					</view>
					<view class="ss" @tap="handleSearch('')">
						<image src="/static/new/home/ss.png" class="ss__icon" mode=""></image>
						<view class="ss__text">
							请输入商品
						</view>
						<view class="ss__btn">
							搜索
						</view>
					</view>
					<view class="action u-flex u-flex-y-center" style="flex: 1;">
						<image src="/static/new/goods/more.png" class="margin-left-bj"
							style="width: 40rpx;height: 40rpx;" mode="" @tap="showModal('menu')"></image>
					</view>
				</view>
			</u-sticky>
			<view class="con">
				<u-swiper :list="list1" height="228rpx" radius='12rpx' bgColor="#fff"></u-swiper>

				<view class="tab">
					<u-grid :border="false" col="6">
						<u-grid-item @click="$wanlshop.to('/pages/page/new?title=关注')">
							<image src="/static/new/home/t0.png" class="tab__item__icon" mode="">
							</image>
							<text class="tab__item__text">关注</text>
						</u-grid-item>
						<u-grid-item @click="$wanlshop.to('/pages/page/new?title=推荐')">
							<image src="/static/new/home/t1.png" class="tab__item__icon" mode="">
							</image>
							<text class="tab__item__text">推荐</text>
						</u-grid-item>
						<u-grid-item v-for="(listItem,listIndex) in common.modulesData.categoryModules" :key="listIndex"
							@click="$wanlshop.to('/pages/page/new?title='+listItem.name+'&index='+listIndex+'&cid='+listItem.id)" v-if="listIndex<=8">
							<image :src="$wanlshop.oss(listItem.image)" class="tab__item__icon" mode="">
							</image>
							<text class="tab__item__text">{{listItem.name}}</text>
						</u-grid-item>
						<u-grid-item @tap="handleModal('category')">
							<image src="/static/new/home/t11.png" class="tab__item__icon" mode="">
							</image>
							<text class="tab__item__text">更多</text>
						</u-grid-item>
					</u-grid>
				</view>
				<view class="u-flex u-flex-xy-center" style="height: 80rpx;padding-bottom: 20rpx;">
					<view class="title">
						{{title}}
					</view>
				</view>
				<goodslist :leftList='leftList' :rightList="rightList"></goodslist>
				<uni-load-more :status="status" :content-text="contentText" />
			</view>
		</view>


		<view class="WANL-MODAL text-sm" @touchmove.stop.prevent="moveHandle">
			<!-- 顶部 -->
			<view class="cu-modal top-modal" :class="modalName == 'menu' ? 'show' : ''" @tap="hideModal()">
				<view class="wanl-modal-menu cu-dialog" style="background: rgba(60, 60, 60, 0.9);" @tap.stop=""><wanl-direct @change="hideModal" /></view>
			</view>
			<view class="cu-modal top-modal" :class="modalName == 'category' ? 'show' : ''" @tap="handleModal()">
				<view class="cu-dialog padding-lr-bj padding-bottom-bj" :style="{ paddingTop: headHeight + 12 + 'px' }"
					@tap.stop="">
					<view class="category text-min">
						<view class="item round bg-gray"
							@click="$wanlshop.to('/pages/page/new?title=关注')">
							关注
						</view>
						<view class="item round bg-gray"
							@click="$wanlshop.to('/pages/page/new?title=推荐')">
							推荐
						</view>
						<view class="item round bg-gray" v-for="(item, index) in common.modulesData.categoryModules"
							:key="item.id" @click="$wanlshop.to('/pages/page/new?title='+item.name+'&index='+listIndex+'&cid='+item.id)"
							>
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
			
			
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	import wanlShopPage from '@/components/wanl-shop/page';
	import wanlShopFind from '@/components/wanl-shop/find';
	import wanlShopCategory from '@/components/wanl-shop/category';

	export default {
		components: {
			wanlShopPage,
			wanlShopFind,
			wanlShopCategory
		},
		computed: {
			...mapState(['common', 'user', 'update'])
		},
		data() {
			return {
				title: '',
				dataList: [], //数据
				current_page: 1, //当前页码
				last_page: 1, //总页码
				status: 'loading',
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '疯狂加载中...',
					contentnomore: '我是有底线的'
				},
				leftList: [],
				rightList: [],
				xxlist: [{
						name: '热推新品'
					},
					{
						name: '热卖好物'
					},
				],
				curxx: 0,
				list: [{
						name: 't0',
						title: '关注'
					},
					{
						name: 't1',
						title: '推荐'
					},
					{
						name: 't2',
						title: '女装'
					},
					{
						name: 't3',
						title: '女装'
					},
					{
						name: 't4',
						title: '男装'
					},
					{
						name: 't5',
						title: '百货'
					},
					{
						name: 't6',
						title: '家电'
					},
					{
						name: 't7',
						title: '美妆洗护'
					},
					{
						name: 't8',
						title: '母婴'
					},
					{
						name: 't9',
						title: '饰品'
					},
					{
						name: 't10',
						title: '箱包'
					},
					{
						name: 't11',
						title: '更多'
					},
				],
				list1: [
					'/static/new/home/banner.png'
				],
				modalName: '',
				scrollAnimation: 300,
				headHeight: 75,
				windowHeight: 0,
				headTop: 0,
				currentItemId: 'home',
				currentData: {},
				scrollLeft: 0,
				contentText: {
					contentdown: '下拉加载更多',
					contentrefresh: '加载中',
					contentnomore: '我是有底线的'
				},
				modalName: null, // 弹出层
			};
		},
		onReachBottom() {
			this.loadData('lower')
		},
		onPullDownRefresh() {
			this.current_page = 1
			this.loadData()
		},
		onShow() {
			// #ifdef APP-PLUS
			plus.navigator.setFullscreen(false);
			// #endif
			// 计算页面尺寸
			let sys = this.$wanlshop.wanlsys();
			this.headTop = sys.top;
			this.headHeight = sys.height + uni.upx2px(60);
			this.windowHeight = sys.windowHeight;
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: this.$store.state.common.modulesData.homeModules.page ?
						this.$store.state.common.modulesData.homeModules.page.style
						.navigationBarTextStyle : '',
					backgroundColor: this.$store.state.common.modulesData.homeModules.page ?
						this.$store.state.common.modulesData.homeModules.page.style
						.navigationBarBackgroundColor : ''
				});
			}, 200);
		},
		created() {
			this.loadData();
		},
		onReady() {
			// 判断网络类型
			uni.getNetworkType({
				success: res => {
					if (res.networkType == '2g' || res.networkType == '3g' || res.networkType == '4g') {
						this.$wanlshop.msg('当前使用非WIFI环境，请注意流量使用');
					} else if (res.networkType == 'none') {
						this.$wanlshop.msg('没有网络');
					}
				}
			});
		},
		onLoad(query) {
			// 判断是否小程序来源
			if (query.hasOwnProperty('scene')) {
				let scene = decodeURIComponent(query.scene);
				scene = this.$wanlshop.getParam(scene);
				console.log('微信小程序：', scene);
			}
			this.title = query.title
		},
		methods: {
			async loadData(type) {
				this.status = 'loading';
				// 判断上拉还是下拉
				if (type === 'lower') {
					if (this.current_page >= this.last_page) {
						this.status = 'noMore';
						return false;
					} else {
						this.current_page += 1;
					}
				}
				await uni.request({
					url: '/wanlshop/product/likes',
					data: {
						page: this.current_page
					},
					success: res => {
						if (type === 'lower') {
							this.dataList = this.dataList.concat(res.data.data);
						} else {
							this.dataList = res.data.data;
						}
						this.leftList = []
						this.rightList = []
						this.dataList.map((t, i) => {
							if (i % 2 == 0) {
								this.leftList.push(t)
							}
							if (i % 2 == 1) {
								this.rightList.push(t)
							}
						})
						this.current_page = res.data.current_page; //当前页码
						this.last_page = res.data.last_page; //总页码
						// 判断是否还有数据
						if (res.data.current_page === res.data.last_page || res.data.total === 0) {
							this.status = 'noMore';
						} else {
							this.status = 'more';
						}
						uni.stopPullDownRefresh()
					}
				});
			},
			...mapActions({
				download: 'update/download', // 立即下载
				ignore: 'update/ignore' // 忽略更新
			}),
			// 选择Tag
			handleSelect(id, index) {
				this.currentItemId = id;
				this.scrollLeft = (index - 1) * 50;
			},
			// 动画
			animationFinish(e) {
				//#ifdef APP-PLUS
				this.changeCurrent(e);
				//#endif
			},
			// 滚动的tag
			changeCurrent(e) {
				this.currentItemId = e.detail.currentItemId;
				this.scrollLeft = (e.detail.current - 1) * 50;
			},
			// 弹出层
			handleModal(name) {
				// 滚动分享
				if (name == 'share') {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				// 强制关闭海报
				if (this.modalName == 'share') {
					this.$refs.wanlShare.closePoster();
				}
				this.modalName = this.modalName ? null : name;
			},
			// 弹出层
			showModal(name) {
				this.isChoice = '';
				// 滚动下分享
				if (name == 'share' && this.modalName != 'share') {
					setTimeout(() => {
						this.scrollAnimation = 0;
					}, 300);
				}
				this.modalName = name;
			},
			// 关闭弹出层
			hideModal(name) {
				if (name) {
					this.showModal(name);
				} else {
					// 强制关闭海报
					if (this.modalName == 'share') {
						this.$refs.wanlShare.closePoster();
					}
					this.modalName = null;
				}
			},
			// 扫码
			scanCode() {
				// #ifndef H5
				uni.scanCode({
					success: res => {
						let query = this.$wanlshop.getParam(res.result),
							id = query.id;
						switch (query.qr) {
							case 'g':
								this.onGoods(id);
								break;
							case 'gr':
								this.$wanlshop.to(
									`/pages/apps/groups/goods?id=${id}&groups_id=${query.groups_id}`);
								break;
							case 'u':
								this.$wanlshop.to(`/pages/user/info?id=${id}`);
								break;
							case 'fu':
								this.$wanlshop.to(`/pages/apps/find/user?id=${id}`);
								break;
							case 'c':
								this.$wanlshop.on('/pages/category');
								break;
							case 'p':
								this.$wanlshop.to(`/pages/page/index?id=${id}`);
								break;
							case 's':
								this.onShop(id);
								break;
							case 'live':
								// #ifdef APP-PLUS || MP-WEIXIN
								this.$wanlshop.auth(`/pages/shop/live/live`);
								// #endif
								// #ifndef APP-PLUS || MP-WEIXIN
								this.$wanlshop.msg('目前只开放App和微信小程序直播');
								// #endif
								break;
							case 'chat':
								this.toChat(id);
								break;
						}
					}
				});
				// #endif
				// #ifdef H5
				this.$wanlshop.msg('暂不支持H5扫码');
				// #endif
			},
			// 搜索
			handleSearch(text) {
				this.$wanlshop.to(`/pages/page/search?type=goods&keywords=${text}`, 'fade-in', 100);
			},
			//禁止父元素滑动 1.0.3升级
			moveHandle() {}
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.wanlshop-container {
		&__head {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 999;
			background-size: 100% auto;
			background-repeat: no-repeat;

			.navigater {
				height: 86rpx;
				padding-left: 25rpx;
				padding-right: 25rpx;
				/* #ifdef MP */
				padding-right: 200rpx;

				/* #endif */
				.search {
					flex: 1;
					background-color: #fff;
					height: 66rpx;
					border: 2rpx solid #fff;

					.icon {
						margin: 0 20rpx;
					}

					swiper {
						height: 100%;
						width: 100%;
						margin-right: 10rpx;

						swiper-item {
							display: flex;
							align-items: center;
						}
					}
				}
			}

			.toolbar {
				.scroll {
					flex: 1;
					white-space: nowrap;
					overflow: hidden;
					width: 100%;

					&__item {
						position: relative;
						z-index: 2;
						font-size: 28rpx;
						display: inline-flex;
						height: 58rpx;
						align-items: center;
						margin-right: 40rpx;

						&.action {
							position: relative;
							font-weight: bold;
							font-size: 30rpx;

							&::after {
								content: ' ';
								position: absolute;
								bottom: 0;
								left: 50%;
								transform: translateX(-50%);
								height: 4rpx;
								width: 30rpx;
								border-radius: 6rpx;
								background-color: #fff;
							}
						}
					}
				}

				.category {
					box-shadow: #eee -16rpx 0 16rpx -16rpx;
					height: 58rpx;
					font-size: 28rpx;
					padding-left: 25rpx;
				}
			}
		}

		&__main {
			position: relative;
			z-index: 99;
		}

		.WANL-MODAL {
			.cu-modal {
				&.top-modal {
					background: rgba(0, 0, 0, 0.6);
					text-align: inherit;

					.cu-dialog {
						background: #fff;
						border-radius: 0 0 18rpx 18rpx;

						.category {
							display: grid;
							grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
							grid-auto-flow: row dense;
							grid-gap: 16rpx;

							.item {
								display: flex;
								align-items: center;
								justify-content: center;
								padding: 12rpx 0;
								border: 2rpx solid transparent;

								&.action {
									background-color: transparent;
									border-color: #f40;
									color: #f40;
									font-weight: bold;
								}
							}
						}
					}
				}
			}
		}
	}



	.head {
		padding: 21rpx;
	}

	.sys {
		width: 36rpx;
		height: 33.43rpx;
	}

	.ss {
		width: 450rpx;
		height: 64rpx;
		background: #F0F0F0;
		border-radius: 44rpx 44rpx 44rpx 44rpx;
		display: flex;
		align-items: center;
		justify-self: flex-start;

		&__icon {
			width: 32.97rpx;
			height: 33rpx;
			margin-left: 17rpx;
		}

		&__text {
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 24rpx;
			color: #999999;
			flex: 1;
			margin-left: 10rpx;
		}

		&__btn {
			width: 110rpx;
			height: 52rpx;
			background: #000000;
			border-radius: 26rpx 26rpx 26rpx 26rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC, PingFang SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			margin-right: 8rpx;
		}
	}

	.fx {
		width: 36rpx;
		height: 36rpx;
	}

	.xxicon {
		width: 38.1rpx;
		height: 36rpx;
		margin-left: 20rpx;
	}



	.con {
		padding: 16rpx 22rpx;

		.tab {
			margin-top: 20rpx;

			&__item {
				display: flex;
				flex-direction: column;
				align-items: center;

				&__icon {
					width: 82rpx;
					height: 82rpx;
				}

				&__text {
					font-family: PingFang SC, PingFang SC;
					font-weight: 400;
					font-size: 24rpx;
					color: #333333;
					line-height: 33rpx;
					margin-top: 6rpx;
					margin-bottom: 20rpx;
				}
			}
		}
	}

	.wbz {
		width: 426rpx;
		height: 130rpx;
		position: relative;

		&__bg {
			width: 426rpx;
			height: 130rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		&__con {
			position: absolute;
			top: 0;
			left: 0;

		}

		&__text {
			width: 147rpx;
			height: 42rpx;
			margin-top: 25rpx;
			margin-left: 34rpx;
		}

		&__yy {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #666666;
			line-height: 25rpx;
			margin-left: 34rpx;
		}
	}

	.pt {
		width: 268rpx;
		height: 130rpx;
		position: relative;

		&__bg {
			width: 268rpx;
			height: 130rpx;
			position: absolute;
			top: 0;
			left: 0;
		}

		&__con {
			position: absolute;
			top: 0;
			left: 0;
			width: 268rpx;
			height: 130rpx;
		}

		&__text {
			width: 118rpx;
			height: 42rpx;
			margin-top: 25rpx;
			margin-left: 30rpx;
		}

		&__yy {
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 18rpx;
			color: #666666;
			line-height: 25rpx;
			margin-left: 34rpx;
		}
	}

	.xx {
		width: 347rpx;
		height: 71rpx;
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		border: 2rpx solid #999999;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 26rpx;
		color: #999999;
		line-height: 26rpx;
	}

	.xxac {
		border: 2rpx solid #333333;
		color: #333333;
	}

	.title {
		text-align: center;
		font-family: HelloFont;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		line-height: 40rpx;
		width: fit-content;
		position: relative;

		&::before {
			display: block;
			content: '';
			width: 10rpx;
			height: 10rpx;
			background: #484848;
			border-radius: 50%;
			position: absolute;
			top: calc(50% - 5rpx);
			left: -24rpx;
		}

		&::after {
			display: block;
			content: '';
			width: 10rpx;
			height: 10rpx;
			background: #484848;
			border-radius: 50%;
			position: absolute;
			top: calc(50% - 5rpx);
			right: -24rpx;
		}
	}
</style>